<template>
  <div class="app-container">
    <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="handleResetClick" />
    <PageContent ref="contentRef" :content-config="contentConfig" @addClick="handleAddClick"
      @edit-click="handleEditClick" @export-click="handleExportClick" @toolbarClick="handleToolbarClick"
      @operat-click="handleOperatClick">
      <template #status="scope">
        <el-tag :type="statusList[scope.row[scope.prop]].type">
          {{ $t(statusList[scope.row[scope.prop]].text) }}
        </el-tag>
      </template>
      <template #type="scope">
        <el-tag v-if="typeList[scope.row[scope.prop]]" :type="typeList[scope.row[scope.prop]].type">
          {{ $t(typeList[scope.row[scope.prop]].text) }}
        </el-tag>
      </template>
      <template #tool="scope">
        <template v-if="scope.row.status === 'successful'">
          <!-- <el-button size="small" icon="view" type="warning" link @click="toolClick('look',scope.row)">
            {{$t('btn.10')}}
          </el-button> -->
          <el-button size="small" icon="download" type="success" link @click="toolClick('download',scope.row)">
            {{$t('btn.9')}}
          </el-button>
        </template>
      </template>

    </PageContent>

    <!-- 编辑 -->
    <!-- <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
      <template #provider_id="scope">
        <el-select v-model="param[scope.prop]" @change="changeAdd(param)">
          <template v-for="option in supList" :key="option.id">
            <el-option :label="option.name" :value="option.id" />
          </template>
        </el-select>
      </template>
    </page-modal> -->
  </div>
</template>

<script setup>
import searchConfig from "./config/search";
import contentConfig from "./config/content";
import usePage from "@/hooks/usePage";
import { onMounted } from "vue";
import { useUserStore } from "@/stores";
defineOptions({
  name: "systemManager",
  inheritAttrs: false,
});
const userStore = useUserStore();
const { t } = useI18n();
// type: deposit, withdrawal, transaction
// status: pending, processing, successful, failed
const statusList = {
  pending: { text: t("status.39") },
  processing: { text: t("status.40"), type: "warning" },
  successful: { text: t("status.41"), type: "success" },
  failed: { text: t("status.42"), type: "danger" },
}
const typeList = {
  deposit: { text: t("status.43"), type: "success" },
  withdrawal: { text: t("status.44"), type: "danger" },
  transaction: { text: t("status.45"), type: 'warning' },
}
const { searchRef, contentRef, addModalRef, editModalRef,
  handleQueryClick, handleResetClick, handleAddClick,
  handleSubmitClick, handleExportClick, } = usePage();
const handleEditClick = (row) => {
  // 模拟根据id获取数据进行填充
  editModalRef.value?.setModalVisible(row);
}
const logInfoRef = ref(null)
const handleOperatClick = (obj) => {
  if (obj.name === "details") {
    logInfoRef.value.show(obj.row.id)
  }
}
const toolClick = (type, obj) => {
  console.log(type, obj);
  if (type === 'download') {
    const downloadLink = document.createElement("a");
    downloadLink.href = obj.url;
    downloadLink.download = obj.name;
    downloadLink.click();
  } else if (type === 'look') {
    window.location.href = obj.url;
    window.open(obj.url);
  }
}
onMounted(() => {
})
</script>